<template>
    <div class="father">
        <h3>父组件</h3>
        <div class="content">
             <category title="热门游戏列表">
                <ul>
                    <li v-for="item in games" :key="item.id">{{ item.name }}</li>
                </ul>
            </category>
            <category title="今日美食城市">
                <img :src="imgUrl" alt="">
            </category>
            <category title="今日影视推荐">
                基础数据
               <template #s3>
                    <div>视频地址暂不可用</div>
               </template>
            </category>
        </div>
        <h2 style="text-align: center;margin-top: 30px;">-----------作用域插槽------------</h2>
        <div>    
            <Game>
                <template v-slot="params">
                        <ul>
                            <li v-for="item in params.games" :key="item.id">{{ item.name }}</li>
                        </ul>
                </template>
            </Game>
        </div>
        <div>    
            <Game>
                <template v-slot="params">
                        <ol>
                            <li v-for="item in params.games" :key="item.id">{{ item.name }}</li>
                        </ol>
                </template>
            </Game>
        </div>
    </div> 
</template>

<script setup name="Father" lang="ts">
    import category from './category.vue'
    import Game from './Game.vue'

    import { ref,reactive } from 'vue';
    let games = reactive([
        {id: 1,name: '英雄联盟'},
        {id: 2,name: '王者荣耀'},
        {id: 3,name: '和平精英'},
        {id: 4,name: 'csgo'},
    ])
    let imgUrl = 'https://z1.ax1x.com/2023/11/19/piNxLo4.jpg'
    let videoUrl = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'


</script>

<style scoped>
    .father{
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
    .content{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
}
img{
    width: 100%;
    height: auto;
}
</style>